<template>
    <div class="main-layout ">
      <el-card class="box-card box-card-list card-margin-top" shadow="never">
        <div class="Mypage">
          <div class="left-menu">
            <LeftMenu></LeftMenu>
          </div>
          <div class="right-content">
            <div class="header-breadcrumb">
              <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item @click="goPage(GoPageName.INDEX)">
                  <div class="text-middle-up mouse-hover-pointer">首页</div>
                </el-breadcrumb-item>
  
                <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
                  <div class="text-middle-up mouse-hover-pointer">
                    {{ item }}
                  </div>
                </el-breadcrumb-item>
  
              </el-breadcrumb>
            </div>
            <div class="title" v-if="breadcrumbList.includes(GoPageName.PERSONALINFO_ZH)">
              <h1> {{ pageNameShow }}</h1>
            </div>
            <div class="content">
              <component :RouteParams="route?.query" :is="selectedComponent"></component>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ArrowRight } from '@element-plus/icons-vue'
  import LeftMenu from "./components/leftMenu.vue"
  import ReserveManager from "./components/reservManager/index.vue"
  import PersonalInfo from "./components/personalInfo/personalInfo.vue"
  import RePassword from "./components/personalInfo/rePassword.vue"
  import ArticleManager from "./components/articlManager/index.vue"
  import ReserveSetting from "./components/reservSettings/index.vue"
  import { ref, watch } from "vue";
  import router from '@/router'
  import { LocationQueryValue, useRoute } from 'vue-router'
  
  import { GoPageName } from "@/enums";
  const route = useRoute()
  
  const judgePath = (path: string | LocationQueryValue[] | null) => {
    if (path === GoPageName.RESERVEMANAGER) {
      return ReserveManager
    } else if (path === GoPageName.PERSONALINFO) {
      return PersonalInfo
    } else if (path === GoPageName.REPASSWORD) {
      return RePassword
    } else if (path === GoPageName.ARTICLEMANAGER) {
      return ArticleManager
    } else if (path === GoPageName.RESERVESETTING) {
      return ReserveSetting
    }

  }
  const JudgePageNameShow = (path: string | LocationQueryValue[] | null) => {
    if (path === GoPageName.RESERVEMANAGER) {
      return GoPageName.RESERVEMANAGER_ZH
    } else if (path === GoPageName.PERSONALINFO) {
      return GoPageName.PERSONALINFO_ZH
    } else if (path === GoPageName.REPASSWORD) {
      return GoPageName.REPASSWORD_ZH
    } else if (path === GoPageName.ARTICLEMANAGER) {
      return GoPageName.ARTICLEMANAGER_ZH
    } else if (path === GoPageName.RESERVESETTING) {
      return GoPageName.RESERVESETTING_ZH
    }
  } 
  
  const selectedComponent = ref(judgePath(route.params.path)) // 切换组件显示
  const breadcrumbList = ref([JudgePageNameShow(route.params.path)])
  const pageNameShow = ref(JudgePageNameShow(route.params.path))
  
  watch(
    () => route.params.path,
    (newPath: any) => {
      // 当 route.params.path 发生变化时触发
      selectedComponent.value = judgePath(newPath)
      pageNameShow.value = JudgePageNameShow(newPath)
      if (newPath === GoPageName.REPASSWORD) {
        breadcrumbList.value.push(pageNameShow.value)
      } else {
        breadcrumbList.value = [pageNameShow.value]
      }
    }
  );
  
  
  
  const goPage = (path: string) => {
    router.push({
      name: path, // 替换为目标路由的名称或路径
    });
  }
  
  </script>
  
  <style scoped>
  .card-margin-top {
    margin-top: 10px;
  }
  
  .Mypage {
    min-height: 750px;
    display: flex;
    justify-content: space-between;
  }
  
  .left-menu {
    flex: 1;
    border-right: 1px solid black;
  }
  
  .right-content {
    flex: 3;
  }
  
  .right-content .header-breadcrumb {
    margin-left: 20px;
  }
  
  .right-content .title {
    margin-top: 20px;
  }
  
  </style>